<template>
  <div class="page">
    <div class="header">
      <h3>注册怎么玩账号</h3>
    </div>
    <el-form class="form" :model="form" ref="form" :rules="rules">
      <el-form-item label="账户名" prop="username">
        <el-input v-model="form.username" placeholder="账户名的长度为6-25"></el-input>
      </el-form-item>
      <el-form-item label="账户名称" prop="nickname">
        <el-input v-model="form.nickname" placeholder="名称的长度为6-20"></el-input>
      </el-form-item>
      <el-form-item label="设置头像" prop="avatar">
        <br />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8010/eleupload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="'http://localhost:8010/getImage?name='+imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="你的密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="密码的长度为6-20"></el-input>
      </el-form-item>
      <el-form-item label="确定密码" prop="password2">
        <el-input v-model="form.password2" type="password" placeholder="确保与上次输入的密码一致"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validAvatar = (rule, value, callback) => {
      if (this.imageUrl === "") {
        callback(new Error("请设置头像"));
      } else {
        callback();
      }
    };
    return {
      form: {},
      imageUrl: "",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 6, max: 25, message: "长度在 6 到 25 个字符", trigger: "blur" }
        ],
        nickname: [
          { required: true, message: "请输入账户名称", trigger: "blur" },
          { min: 6, max: 25, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        avatar: [
         { validator: validAvatar, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        password2: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    beforeAvatarUpload() {},
    handleAvatarSuccess(res, file) {
      window.console.log('res',res);
      this.imageUrl = res.url.split('=')[1];
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.avataurl = this.imageUrl
          this.$axios.post("/api2/user/register",this.form).then(res=>{
            if(res.data.type=="SUCCESS"){
              this.$message.success('注册成功！')
              this.$router.push('/user/login')
            }
          })
        } 
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    //   background: red;
    border-color: #409eff;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.page {
  width: 800px;
  margin: 0 auto;
  .header {
    border-bottom: 6px solid #27c18f91;
    margin: 10px auto;
  }
  .form {
    width: 400px;
  }
}
</style>